<template>
    <el-container>
        <el-header>
              <h1 align="center">我的成绩统计</h1>
        </el-header>
         <el-main align="center">

              <el-select v-model="value" @change="changeInfo">
                  <el-option v-for="x in option" :label="x.name" :value="x.value"></el-option>
              </el-select>
              <br> <br>
              <!--设置一个画图容器-->
            <div id="zhe" style="width: 1000px;height: 500px"></div>
         </el-main>
    </el-container>

</template>

<script>
  import * as echarts from 'echarts';
    export default {
        name: "ScoreCount",
        data(){
          return{
             option:[
               {"name":"所有考试的分数变化","value":"zhe"},
               {"name":"我的考试的分数区间","value":"bing"},
               {"name":"所有考试的分数排名","value":"zhu"},
             ],
             value:"zhe"//默认选中zhe
          }
        },
        methods:{
          changeInfo(){//下拉框选中触发的事件
              const self = this;
              this.$http.get("/server-exam-manager/count/count/1",{params:{"type":this.value}})
              .then(function (rs) {
                  console.log(rs.data);
                  if(self.value=='bing'){
                    self.bing(rs.data);
                  }else if(self.value=='zhe'){
                    self.zhe(rs.data);
                  }else{
                    self.zhu(rs.data);
                  }
              })
          },
            zhe(v){//折线图
              //根据容器创建一个echarts图表对象
              var my = echarts.init(document.getElementById("zhe"));
              //图片设置
              var option = {
                xAxis: {
                  type: 'category',
                  data:v.data.x
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    data: v.data.y,
                    type: 'line'
                  }
                ]
              };
              //添加图片设置到echarts对象中
              my.setOption(option);
            },
          bing(v){//饼图
              //根据容器创建一个echarts图表对象
              var my = echarts.init(document.getElementById("zhe"));
              //图片设置
              var option = {
                title: {
                  text: '分数区间变化',
                  subtext: '',
                  left: 'center'
                },
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  orient: 'vertical',
                  left: 'left'
                },
                series: [
                  {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: v.data,
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              };
              //添加图片设置到echarts对象中
              my.setOption(option);
            },
          zhu(v){//柱状图
            //根据容器创建一个echarts图表对象
            var my = echarts.init(document.getElementById("zhe"));
            //图片设置
            var option = {
              xAxis: {
                type: 'category',
                data: v.data.x
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: v.data.y,
                  type: 'bar'
                }
              ]
            };
            //添加图片设置到echarts对象中
            my.setOption(option);
          },



        },
        mounted() {
          this.changeInfo();
        }
    }
</script>

<style scoped>

</style>
